<template>
  <div class="app-container">
    <div class="app-title">查询条件</div>
    <div class="filter-container clearfix">
      <!-- <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="用户Id/姓名/手机号" /> -->
      <div class="searchItem">
        <label for="">手机号:</label>
        <el-input
          v-model="fromSearch.mobileLike"
          placeholder="请输入手机号"
          class="search-item"
          @keyup.enter.native="search"
        />
      </div>

      <div class="searchItem">
        <label for="">身份证:</label>
        <el-input
          v-model="fromSearch.idCardNoLike"
          placeholder="请输入身份证:"
          class="search-item"
          @keyup.enter.native="search"
        />
      </div>
      <div class="searchItem">
        <label for="">身份:</label>
        <el-select v-model="fromSearch.roleType" placeholder="全部">
          <el-option value="0" label="普通用户" />
          <el-option value="1" label="经纪人" />
          <el-option value="2" label="城市合伙人" />
          <el-option value="3" label="品牌合伙人" />
        </el-select>
      </div>
      <div class="searchItem">
        <label for="">平台名称:</label>
        <el-select v-model="fromSearch.application" placeholder="全部">
          <el-option value="00" label="ebroker" />
          <el-option value="01" label="车E家" />
          <el-option value="02" label="小程序" />
        </el-select>
      </div>
      <div class="searchItem">
        <el-button
          v-has-permission="['usercenter:search']"
          class="searchItembtn"
          type="primary"
          @click="search"
        >
          {{ $t("common.search") }}
        </el-button>
        <el-button class="searchItembtn" type="success" @click="reset">
          {{ $t("table.reset") }}
        </el-button>
      </div>
      <!-- </el-form> -->
    </div>
    <div class="app-title">用户注销列表</div>

    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%"
    >
      <el-table-column
        label="用户ID"
        prop="username"
        :show-overflow-tooltip="true"
        align="center"
        min-width="120px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机号"
        :show-overflow-tooltip="true"
        align="center"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="身份证"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.idCardNo }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="身份"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ ["普通用户", "经纪人","城市合伙人","品牌合伙人"][scope.row.roleType] }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="注销时间"
        :show-overflow-tooltip="true"
        min-width="150px"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.logoutTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="prop"
        min-width="150px"
        label="注销渠道"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.logoutChannel=='00'?'ebroker':'车E家' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        align="center"
        min-width="150px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <!-- <i
            v-hasPermission="['usercenter:view']"
            class="el-icon-view table-operation"
            style="color: #87d068"
            @click="view(row)"
          /> -->
          <el-link
            v-hasPermission="['usercenter:view']"
            class="el-icon-view"
            @click="view(row)"
          >
            查看详情
          </el-link>
          <el-link v-has-no-permission="['usercenter:view']" class="no-perm">
            {{ $t("tips.noPermission") }}
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pagination.pageNum"
      :limit.sync="pagination.pageSize"
      @pagination="search"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      total: 0,
      pagination: {
        pageSize: 10,
        pageNum: 1
      },
      loading: false,
      fromSearch: {
        idCardNoLike: '',
        mobileLike: '',
        roleType: '',
        application: ''
      },
      tableKey: 0,
      list: [],
      provinceList: [],
      cityList: [],
      registerProvince: '',
      registerCity: ''
    }
  },
  watch: {

  },
  created() {
    this.search()
  },
  methods: {
    search(e) {
      this.loading = true
      if (e && e.page) {
        this.pagination.pageSize = e.limit
        this.pagination.pageNum = e.page
      }
      // const { registerProvince, registerCity } = this
      this.$get('/web/userOut/list', {
        ...this.pagination,
        ...this.fromSearch
      })
        .then((res) => {
          this.loading = false
          this.list = res.data.data.rows
          this.total = res.data.data.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    reset() {
      this.fromSearch = {}
      this.registerProvince = ''
      this.registerCity = ''
      this.search()
    }, // 查询数据
    view({ id, logoutTime, roleType, logoutChannel }) {
      this.$router.push({
        name: 'logoutDetail',
        query: {
          id,
          logoutTime,
          roleType,
          logoutChannel
        }
      })
    }
  }
}
</script>

<style>
</style>
